<template>
  <view class="statistics-item">
    <view>
      <text v-if="isOtherJoin" class="title">本会</text>
      <text class="title">{{ title }}</text>
      <!-- <text class="title" v-if="isOneself">(总)</text> -->
    </view>

    <view class="number-box">
      <text class="number">{{ number }}</text>
      <text class="unit">{{ unit }}</text>
    </view>

    <view v-if="toDay !== undefined" class="today">
      <text class="title">今日</text>
      <text :class="toDayClass">{{ toDay }}</text>
    </view>
  </view>
</template>
<script setup lang="ts">
  import { ActivityTypeEnum } from '@/enums/activityStatusEnum';
  import { computed } from 'vue';

  const props = defineProps({
    title: {
      type: String,
      default: '',
    },
    number: {
      type: Number,
      default: 0,
    },
    activityType: {
      type: String as () => ActivityTypeEnum,
    },
    /**单位 */
    unit: {
      type: String,
      default: '',
    },
    toDay: {
      type: Number,
      default: undefined,
    },
  });

  const isOneself = computed(() => props.activityType === ActivityTypeEnum.oneself);
  const isOtherJoin = computed(() => props.activityType === ActivityTypeEnum.other_join);

  const toDayClass = computed(() => {
    if (props.toDay === undefined) return;
    return props.toDay > 0 ? 'addition' : 'subtraction';
  });
</script>
<style lang="scss" scoped>
  .statistics-item {
    width: 200rpx;
    display: flex;
    flex-direction: column;
    gap: 8rpx;
    flex: 1;
    align-items: flex-start;
    .title {
      font-size: 24rpx;
      opacity: 0.7;
      display: inline-block;
      color: #dcdee0;
      font-weight: 400;
    }
    .number-box {
      display: flex;
      align-items: center;
      .number {
        color: #fff;
        font-size: 28rpx;
        font-weight: 700;
        line-height: 40rpx;
      }
      .unit {
        color: #fff;
        font-size: 24rpx;
        line-height: 32rpx;
      }
    }

    .today {
      display: flex;
      align-items: center;
      gap: 8rpx;
      .title {
        color: #dcdee0;
        font-size: 24rpx;
        font-weight: 400;
      }
      .addition {
        color: #fbff37;
        font-size: 24rpx;
        font-weight: 400;
        &::before {
          content: '+';
        }
      }
      .subtraction {
        color: #ea5e0e;
        font-size: 24rpx;
        font-weight: 400;
      }
    }
  }
</style>
